import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import type { InsureEnsurePlanDto } from '@/api/insureEnsurePlan/types'


export type SupplementaryInfoDataDto = Pick<InsureEnsurePlanDto, 'specialRemark' | 'planStartTime' | 'insureType' | 'planEndTime'>

@Component({
    emits: ['submit', 'reset']
})
export class SupplementaryInfo extends Render {
    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '',
            width:'640px',
            theme: 'dark',
            show: false,
            params: {
                confirmText:'确定'
            },
            items: {
                specialRemark: {
                    name: '要求补充',
                    element:'textarea'
                },
                planStartTime: {
                    name: '生效时间',
                    element: 'datetime',
                    params: {
                        valueFormat: 'YYYY-MM-DD',
                    },
                    callback: {
                        change: (val: string) => {
                            console.log(123, val)
                            this.formConfig.items.planEndTime.value = ''
                            this.formConfig.items.planEndTime.params.minDateTime = val
                        }
                    }
                },
                planEndTime: {
                    name: '截止时间',
                    element: 'datetime',
                    params: {
                        valueFormat: 'YYYY-MM-DD',
                        minDateTime: ''
                    }
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                console.log(data, 'datadata')
                this.formConfig.show = false
                // this.showChange(false)
            },
            cancel: () => {
                this.formConfig.show = false
                // this.showChange(false)
            }
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    async submit() {
        await this.basicForm.validate()
        const data = getModelValue(this.formConfig)
        console.log('3', data)
        return data as SupplementaryInfoDataDto
    }
    
    reset() {
        console.log('reset3')
        initModelValue(this.formConfig)
        this.basicForm.clear()
    }
    
    created() { 
        this.basicForm = renderForm(this.formConfig)
    }
    render() {
        return <>
            { this.basicForm.element() }
        </>
    }
}

export default toNative<{}, {}>(SupplementaryInfo)